<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="<%=basePath%>">
    
    <title>后台首页</title>

	<jsp:include page="include.jsp"></jsp:include>
	<!-- 青色 #389a57 #59be7b  cff1da 红褐色 #41182a #683047 黑色 #00264c-->
    <style type="text/css">
    </style>
  </head>
 
  <body>
	
	<c:if test="${currAccount == null}"><%response.sendRedirect(path+"/indexController/login");%></c:if>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="indexController/index">小七当家</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="indexController/index">首页</a></li>
            <li><a href="javascript:void(0);">帮助</a></li>
            <li><a href="javascript:void(0);" onClick="aboutUs();">关于我们</a></li>
            <li><a href="indexController/index?logout">退出系统</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <div class="panel-group " id="accordion" role="tablist" aria-multiselectable="true">
<!--             <div class="menu">
              <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
            </div> -->
<!--             <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <span class="glyphicon glyphicon-list" aria-hidden="true"></span> 基本信息
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                  <ul class="nav nav-sidebar">
                    <li><a href="javascript:void(0);" data-link="divisionController/view">国家及城市代码</a></li>
                    <li><a href="javascript:void(0);" data-link="projectController/view">项目信息</a></li>
                    <li><a href="javascript:void(0);" data-link="infoController/view">公告信息</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> 路址信息
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                  <ul class="nav nav-sidebar">
                    <li><a href="javascript:void(0);" data-link="buildingController/view">楼栋路址信息 </a></li>
                    <li><a href="javascript:void(0);" data-link="unitController/view">单元路址信息</a></li>
                    <li><a href="javascript:void(0);" data-link="perAddressController/view">门禁路址信息</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 用户信息
                  </a>
                </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                  <ul class="nav nav-sidebar">
                    <li><a href="javascript:void(0);" data-link="roleController/view">角色信息</a></li>
                    <li><a href="javascript:void(0);" data-link="accountController/view">用户账户信息</a></li>
                    <li><a href="javascript:void(0);" data-link="userController/view">用户基本信息</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingFour">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 系统设置
                  </a>
                </h4>
              </div>
              <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
                <div class="panel-body">
                  <ul class="nav nav-sidebar">
                    <li><a href="javascript:void(0);">功能清单</a></li>
                    <li><a href="javascript:void(0);">权限设置</a></li>
                    <li><a href="javascript:void(0);">修改密码</a></li>
                  </ul>
                </div>
              </div>
            </div> -->
          </div>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	      <h2 class="page-header">图表分析</h2><a type="button" name="dataMonitorBtn" class="btn btn-default" href="javascript:void(0);"><span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span> 数据监控</a>
	      <div class="col-sm-6" id="main1" style="width: 600px;height:400px;"></div>
	      <div class="col-sm-6" id="main2" style="width: 600px;height:400px;"></div>
        </div>

		<!-- Modal aboutUs-->
		<div class="modal fade" id="aboutUsDialog" tabindex="-1" role="dialog" aria-labelledby="model" data-backdrop="static">
		     <div class="modal-dialog" role="document">
		       <div class="modal-content">
		         <!-- content -->
		       </div>
		     </div>
		 </div>

      </div>
    </div>
    
    <script type="text/javascript">
      var path = "<%=path%>";
      /**************** 数据监控 ****************/

  	 $('a[name="dataMonitorBtn"]').click(function (){
	     var url = path + '/druid/index.html';
  	     window.open(url);
	 }); 
      
      /****************  动态切换菜单 ****************/
      var $table = $('#table');
      $(function () {
    	  getMenu();
          $('#toolbar').find('select').change(function () {
              $table.bootstrapTable('destroy').bootstrapTable({
                  exportDataType: $(this).val()
              });
          });
          $('.panel-body a').on('click', function() {
      		var link = $(this);
      		reloadPage(link.attr('data-link'));
    	   });
      });
      
      function getMenu(){
     	  $.ajax({
     		 url: "indexController/process/getMenu",
         	 type : "post",
         	 dataType: "json",
         	 async : false,
     		 success: function(data){
     			 initialMenu(data.parent, data.children);
     		 },
     		 error: function(data){
     			 console.log("error");
     		 }
     	  });
       }
      
      function initialMenu(parent, children){
     	  var menu = "";
     	  var menuParent = "";
     	  var menuChildren = "";
     	  var menuicon = new Array();
 			   menuicon[0] = '<span class="glyphicon glyphicon-user" aria-hidden="true"></span> ';
			   menuicon[1] = '<span class="glyphicon glyphicon-list" aria-hidden="true"></span> ';
			   menuicon[2] = '<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> ';
			   menuicon[3] = '<span class="glyphicon glyphicon-user" aria-hidden="true"></span> ';
			   menuicon[4] = '<span class="glyphicon glyphicon-cog" aria-hidden="true"></span> ';
			   menuicon[5] = '<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> ';
			   menuicon[6] = '<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span> ';
 			   
     	  for(var i = 0; i<parent.length; i++){
     		  if (parent[i].id != null) {
     			  menuParent += '<div class="panel panel-default"><div class="panel-heading" role="tab" id="heading'+ (i+1) + '"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse'+
     			      (i+1) +'"  aria-expanded="false" aria-controls="collapse' + (i+1) + '">' + menuicon[i] + parent[i].name + '</a></h4></div>';
     		  } else{
     			  continue;
     		  }
         	  var menuChildrenElement2 =  '<li><a href="javascript:void(0);" data-link="';
         	  var menuChildrenElement3 =  '">';
         	  var menuChildrenElement4 =  '</a></li>';
         	  var menuChildrenElement5 = '</ul></div></div></div>';
     		  var str = "";
     		  var count = 0;
     		  for(var j = 0; j<children.length; j++){//循环每个父节点下的子节点
     			  if (children[j].pid == parent[i].id) {
     				  count ++ ;
     				  str += menuChildrenElement2 + children[j].url + menuChildrenElement3 + children[j].name + menuChildrenElement4;
     			  } else {
     				  
     			  }
     		  } 
     		  if (count != 0){
     			  menuChildren += '<div id="collapse'+ (i+1) + '" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading' + (i+1) + '"><div class="panel-body"><ul class="nav nav-sidebar">' + str;
 		  	  } else {
 			      menuChildrenElement5 = "";
 		      }
     		  menuParent += menuChildren + menuChildrenElement5;
     		  menuChildren = "";
     	  }
     	  menu = menuParent ;
     	  $("#accordion").append(menu);
       }
    
       function reloadPage(url) {
    		$(".main").empty();
    		$(".main").load(url);
       }
       
       /********************* basic javascript **************************/
       //show modal
       function showModal(url, callback){
          $.get(url, function (data){
            var modal = $('#aboutUsDialog');
            var modal_content =  modal.find('.modal-content');
            modal_content.html(data);
            if(callback){
            	callback();
            }
            modal.modal('show');
          });
        }

       function aboutUs() {
    	   	 //var url = path + '/indexController/aboutUs';
  	     //showModal(url);
  	           $.ajax({
		        type : "post",
		        url:"http://localhost:8080/ssh/v1/appBase/login",
		        async:true,
		        data:{
		          'telephone':"admin",
		          'password':"123456"
		        },
		        dataType: 'json',
		        success: function(data){
		               console.log(data);
		             },
		        error:function(){
		               console.log("服务中断");
		        }
		      })
       }
       
      /****************  table javascript ****************/
      //table Formatter
      function indexFormatter(value, row, index) {  
          return index+1;  
      }
      
      function dateFormatter(value, row, index) {
	    	var date = new Date(value);
	    	var Y= date.getFullYear() + '-';
	    	var M = (date.getMonth()+ 1) < 10 ?'0'+ (date.getMonth()+1) + '-':(date.getMonth()+1)+'-';
	    	var D = date.getDate()< 10 ?'0' +  date.getDate(): date.getDate();
	    	return Y+M+D;
      }
      
      function detailFormatter(index, row) {
          var html = [];
          $.each(row, function (key, value) {
              html.push('<p><b>' + key + ':</b> ' + value + '</p>');
          });
          return html.join('');
      }
   
      /****************  echarts javascript ****************/
      var myChart1 = echarts.init(document.getElementById('main1')); 
      var myChart2 = echarts.init(document.getElementById('main2'));
      
      option1 = {

    		    title: {
    		        text: '用户渠道分析',
    		        left: 'center',
    		        top: 20,
    		        textStyle: {
    		            color: '#555'
    		        }
    		    },

    		    tooltip : {
    		        trigger: 'item',
    		        formatter: "{a} <br/>{b} : {c} ({d}%)"
    		    },

    		    visualMap: {
    		        show: false,
    		        min: 80,
    		        max: 600,
    		        inRange: {
    		            colorLightness: [0, 1]
    		        }
    		    },
    		    series : [
    		        {
    		            name:'访问来源',
    		            type:'pie',
    		            radius : '55%',
    		            center: ['50%', '50%'],
    		            data:[
    		                {value:335, name:'ios客户端'},
    		                {value:310, name:'andriod客户端'},
    		                {value:274, name:'ipad客户端'},
    		                {value:235, name:'pc端'},
    		                {value:400, name:'其他'}
    		            ].sort(function (a, b) { return a.value - b.value; }),
    		            roseType: 'radius',

    		            itemStyle: {
    		                normal: {
    		                    shadowBlur: 200,
    		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
    		                }
    		            }
    		        }
    		    ]
    		};
     

      option2 = {
    	  title: {
  		      text: '用户活跃度分析',
  		      left: 'center',
  		      top: 20,
  		      textStyle: {
  		          color: '#555'
  		      }
  		  },
          color: ['#3398DB'],
          tooltip : {
              trigger: 'axis',
              axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                  type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : [
              {
                  name:'直接访问',
                  type:'bar',
                  barWidth: '60%',
                  data:[10, 52, 200, 334, 390, 330, 220]
              }
          ]
      };


      myChart1.setOption(option1);
      myChart2.setOption(option2);
      
    </script>
  </body>
</html>
